<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类jQuery封装Ajax</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <input id="username" type="text" name="username">
    <input id="submit" type="submit" value="提交" name="提交">
    <!-- <script src="../jquery-3.4.0.js"></script> -->
    <script>
        // jquery实现ajax方法
        /* $(document).ready(function () {
            var submit = document.getElementById("submit");
            $("#submit")[0].onclick = function () {
                $.ajax({
                    type: "POST",
                    url: "8-类jQuery的Ajax方法.php",
                    timeout: 3000,
                    data: {
                        userName: $("#username")[0].value
                    },
                    success: function (xhr) {
                        alert(xhr);
                    },
                    error: function (xhr, textStatus) {
                        console.log(textStatus);
                    }
                })
            }
        }) */

        function toStr(obj) {
            var arr = [];
            obj.t = Date.now();
            for (let key in obj) {
                arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
            }
            return arr.join("&");
        }

        /**
         * @method ajax 
         * @description 一个类似jQuery的Ajax方法
         * @option {Object} options 配置参数
         */
        function ajax(options) {
            var xhr;
            var timer;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var str = toStr(options.data);
            // toLowerCase()是一个函数
            if (options.type.toLowerCase() === "get") {
                xhr.open(options.type, options.url + "?" + str, true);
                xhr.send();
            }
            else if (options.type.toLowerCase() === "post") {
                xhr.open(options.type, options.url, true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(str);
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    clearInterval(timer);
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                        options.success(xhr);
                    }
                    else {
                        options.error(xhr);
                    }
                }
            }

            if (options.timeout) {
                timer = setInterval(function () {
                    console.log("请求超时");
                    console.log(xhr);
                    xhr.abort();
                    clearInterval(timer);
                }, options.timeout);
            }

        }

        window.onload = function () {
            var username = document.querySelector("#username");
            var submit = document.querySelector("#submit");
            submit.onclick = function () {
                ajax({
                    type: "PosT",
                    url: "./8-类jQuery的Ajax方法.php",
                    timeout: 3000,
                    data: {
                        username: username.value
                    },
                    success: function (xhr) {
                        alert(xhr.responseText);
                    },
                    error: function (xhr) {
                        console.log(xhr.status);
                    }
                })
            }
        }
    </script>
</body>

</html>